<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气象站</title>

    <link href="http://172.16.239.95/assets/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://172.16.239.95/assets/js/jquery.min.js"></script>
    <script src="http://172.16.239.95/assets/js/bootstrap.min.js"></script>

    <script src="http://172.16.239.95/assets/js/raphael.js"></script>
    <script src="http://172.16.239.95/assets/js/jquery.backstretch.min.js"></script>



</head>

<style>
    body {
        width: 90%;
        margin: 20px auto;
        background-color: #FFFFFF;
        padding: 20px;
    }
</style>
<body>

<div class="row" style="background-color: rgba(0,0,0,0.5);">
    <div class="col-md-4 text-center" id="g1" style="height: 350px;"></div>
    <div class="col-md-4 text-center" id="g2" style="height: 350px;"></div>
    <div class="col-md-4 text-center" id="g3" style="height: 350px;"></div>
</div>

</body>

<script src="http://172.16.239.95/assets/js/justgage.min.js"></script>
<script>

    $(document).ready(function(){
        var i=1;
        var g1;
        var g2;
        
        htmlobj=$.ajax({
                type: "POST",
                url: "http://172.16.239.95/showdata",
                data: {'temperature':'Pi_temperature','humidity':'Pi_humidity','yudi':'Pi_yudi','pressure':'Pi_pressure'},
                success: function(msg) {
                    console.log("温度: " + msg.Pi_temperature);
                    console.log("湿度: " + msg.Pi_humidity);
		    if(msg.Pi_yudi == 1) {
                        $.backstretch(["http://172.16.239.95/assets/image/noyudi.jpg"]); //背景
                        console.log("雨滴: 无" );
                    }else{
                        $.backstretch(["http://172.16.239.95/assets/image/yudi.jpg"]); //背景
                        console.log("雨滴: 有" );
                    }

                    g1.refresh(msg.Pi_temperature);
                    g2.refresh(msg.Pi_humidity);
                    g3.refresh(msg.Pi_pressure);
                }
        });

        setInterval(function () {
            htmlobj=$.ajax({
                type: "POST",
                url: "http://172.16.239.95/showdata",
                data: {'temperature':'Pi_temperature','humidity':'Pi_humidity','yudi':'Pi_yudi','pressure':'Pi_pressure'},
                success: function(msg) {
                    console.log("温度: " + msg.Pi_temperature);
                    console.log("湿度: " + msg.Pi_humidity);
                    console.log("气压: " + msg.Pi_pressure);
                    if(msg.Pi_yudi == 1) {
                        $.backstretch(["http://172.16.239.95/assets/image/noyudi.jpg"]); //背景
                        console.log("雨滴: 无" );
                    }else{
                        $.backstretch(["http://172.16.239.95/assets/image/yudi.jpg"]); //背景
                        console.log("雨滴: 有" );
                    }

                    g1.refresh(msg.Pi_temperature);
                    g2.refresh(msg.Pi_humidity);
                    g3.refresh(msg.Pi_pressure);
                }
            });

        },3000);

        var g1 = new JustGage({
            id: "g1",
            value: 0,
            min: 0,
            max: 50,
            title: "温度",
            label: "摄氏度",
            valueFontColor : "#D4D4D4",
            levelColors: [
                "#59DF65",
		"#167128",
                "#FF3C2D"
            ],
        });

        var g2 = new JustGage({
            id: "g2",
            value: 0,
            min: 0,
            max: 100,
            title: "湿度",
            label: "百分比",
            valueFontColor : "#D4D4D4",
            levelColors: [
                "#2EE2FF",
                "#0C20FF"
            ],
        });

        var g3 = new JustGage({
            id: "g3",
            value: 860,
            min: 860,
            max: 1060,
            title: "气压",
            label: "hPa",
            valueFontColor : "#D4D4D4",
            levelColors: [
                "#F9E421",
                "#F98A1C"
            ],
        });

//        setInterval(function() {
//            g1.refresh(getRandomInt(20, 30));
//        }, 800);


    });




</script>
</html>
